<template>
  <div>
    <div class="red" v-show="visible"></div>
    <div class="green" v-if="visible"></div>
    <button @click="toggle">切换</button> <br>

    <div v-if="isLogin">已登录</div>
    <div v-else>未登录</div>
    <button @click="login">登录</button>
    <button @click="logout">退出</button>

    <br><hr>
    <div v-if="mark > 80">优秀</div>
    <div v-else-if="mark > 60">良好</div>
    <div v-else color="red">不及格</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const visible = ref(true);
const toggle = () => {
  visible.value = !visible.value;
}

const isLogin = ref(false);
const login = () => {
  isLogin.value = true;
}
const logout = () => {
  isLogin.value = false;
}

const mark = ref(60);
</script>

<style scoped>
.red {
  width: 100px;
  height: 100px;
  background-color: red;
}

.green {
  width: 100px;
  height: 100px;
  background-color: green;
}
</style>